<!--
 * @Author: 涵崽
 * @Date: 2024-03-01 16:52:50
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2024-03-06 10:04:23
 * @Description: 微信：1045654
-->
<template>
  <el-table :data="list" style="width: 100%; padding-top: 15px">
    <el-table-column label="Order_No" min-width="200">
      <template slot-scope="scope">
        {{ scope.row.order_no | orderNoFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Price" width="195" align="center">
      <template slot-scope="scope">
        ¥{{ scope.row.price | toThousandFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Status" width="100" align="center">
      <template slot-scope="{ row }">
        <el-tag :type="row.status | statusFilter">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: "success",
        pending: "danger",
      };
      return statusMap[status];
    },
    orderNoFilter(str) {
      return str.substring(0, 30);
    },
    toThousandFilter(num) {
      return (+num || 0)
        .toString()
        .replace(/^-?\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ","));
    },
  },
  data() {
    return {
      list: null,
      resData: {
        code: 20000,
        data: {
          total: 20,
          items: [
            {
              order_no: "1b9d6bcd-bbfd-4b2d-b8b5-ab8dfbbd4bed",
              timestamp: "2023-09-17T12:34:56.789Z",
              username: "John Doe",
              price: "12345.67",
              status: "pending",
            },
            {
              order_no: "2c9d6bcd-bbfd-4b2d-b8b5-ab8dfbbd4bee",
              timestamp: "2023-09-17T12:35:12.345Z",
              username: "Jane Smith",
              price: "8976.54",
              status: "success",
            },
            {
              order_no: "3c9d6bcd-bbfd-4b2d-b8b5-ab8dfbbd4bef",
              timestamp: "2023-09-17T12:35:28.901Z",
              username: "Mark Johnson",
              price: "4567.89",
              status: "pending",
            },
            {
              order_no: "4c9d6bcd-bbfd-4b2d-b8b5-ab8dfbbd4bf0",
              timestamp: "2023-09-17T12:35:44.567Z",
              username: "Emily Davis",
              price: "11223.33",
              status: "success",
            },
            {
              order_no: "5c9d6bcd-bbfd-4b2d-b8b5-ab8dfbbd4bf1",
              timestamp: "2023-09-17T12:36:00.234Z",
              username: "David Lee",
              price: "7894.56",
              status: "pending",
            },
            {
              order_no: "6c9d6bcd-bbfd-4b2d-b8b5-ab8dfbbd4bf2",
              timestamp: "2023-09-17T12:36:15.890Z",
              username: "Olivia Wilson",
              price: "14567.89",
              status: "success",
            },
            {
              order_no: "7c9d6bcd-bbfd-4b2d-b8b5-ab8dfbbd4bf3",
              timestamp: "2023-09-17T12:36:31.567Z",
              username: "Michael Thompson",
              price: "9876.54",
              status: "pending",
            },
            {
              order_no: "8c9d6bcd-bbfd-4b2d-b8b5-ab8dfbbd4bf4",
              timestamp: "2023-09-17T12:36:47.234Z",
              username: "Sarah Mitchell",
              price: "5678.90",
              status: "success",
            },
            {
              order_no: "9c9d6bcd-bbfd-4b2d-b8b5-ab8dfbbd4bf5",
              timestamp: "2023-09-17T12:37:02.890Z",
              username: "Christopher Davis",
              price: "1234.56",
              status: "pending",
            },
            {
              order_no: "ac9d6bcd-bbfd-4b2d-b8b5-ab8dfbbd4bf6",
              timestamp: "2023-09-17T12:37:18.567Z",
              username: "Sophia Wilson",
              price: "6789.01",
              status: "success",
            },
          ],
        },
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.list = this.resData.data.items.slice(0, 8);
    },
  },
};
</script>
